<div
  class="accessory-box"
  (longClick)="onClick()"
  (shortClick)="onClick()"
  tabindex="0"
  [ngClass]="{
    'replace': service.values.FilterChangeIndication === 1 || service.values.FilterLifeLevel < 10,
    'dirty': service.values.FilterChangeIndication !== 1 && service.values.FilterLifeLevel < 50,
  }"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.filter_maintenance' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- top outer ellipse -->
        <ellipse
          class="status"
          cx="16"
          cy="7"
          rx="11"
          ry="5"
          stroke="#7f7f7f"
          stroke-width="1.75"
          fill="#4caf50"
          fill-opacity="0.5"
        />
        <!-- top inner ellipse -->
        <ellipse
          class="back"
          cx="16"
          cy="7"
          rx="6"
          ry="2"
          stroke="#7f7f7f"
          stroke-width="1"
          fill="#e0e0e0"
          fill-opacity="1"
        />
        <!-- side walls -->
        <line x1="5" y1="7" x2="5" y2="27.7" stroke="#7f7f7f" stroke-width="1.75" />
        <line x1="27" y1="7" x2="27" y2="27.7" stroke="#7f7f7f" stroke-width="1.75" />
        <!-- base arc -->
        <path d="M4.7,27 A13,6.9 0 0,0 27.3,27" stroke="#7f7f7f" stroke-width="1.75" fill="none" />
        <!-- outer front lines -->
        <line x1="7" y1="10" x2="7" y2="29" stroke="#7f7f7f" stroke-width="1" />
        <line x1="9" y1="11" x2="9" y2="29" stroke="#7f7f7f" stroke-width="1" />
        <line x1="11" y1="12" x2="11" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="13" y1="12" x2="13" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="15" y1="12" x2="15" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="17" y1="12" x2="17" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="19" y1="12" x2="19" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="21" y1="12" x2="21" y2="30" stroke="#7f7f7f" stroke-width="1" />
        <line x1="23" y1="11" x2="23" y2="29" stroke="#7f7f7f" stroke-width="1" />
        <line x1="25" y1="10" x2="25" y2="29" stroke="#7f7f7f" stroke-width="1" />
        <!-- inner back lines -->
        <line x1="11" y1="6" x2="11" y2="8" stroke="#7f7f7f" stroke-width="1" />
        <line x1="13" y1="5" x2="13" y2="9" stroke="#7f7f7f" stroke-width="1" />
        <line x1="15" y1="5" x2="15" y2="9" stroke="#7f7f7f" stroke-width="1" />
        <line x1="17" y1="5" x2="17" y2="9" stroke="#7f7f7f" stroke-width="1" />
        <line x1="19" y1="5" x2="19" y2="9" stroke="#7f7f7f" stroke-width="1" />
        <line x1="21" y1="6" x2="21" y2="8" stroke="#7f7f7f" stroke-width="1" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    <div class="accessory-label grey-text">
      <span [ngClass]="{ 'red-text': service.values.FilterChangeIndication === 1 }">
        {{ service.values.FilterLifeLevel }}%
      </span>
      @if (service.values.FilterChangeIndication === 1) { &middot;
      <span class="red-text">{{ 'accessories.control.replace' | translate }}</span>
      }
    </div>
  </div>
</div>
